<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>漫步湖北理工学院 - 校园地图导览</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0066b2', // 湖北理工学院主色调-蓝色
                        secondary: '#e67e22', // 辅助色-橙色
                        accent: '#27ae60', // 强调色-绿色
                        neutral: '#f5f5f5', // 背景色
                        'text-dark': '#333333',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .shadow-custom {
                box-shadow: 0 4px 20px rgba(0, 102, 178, 0.15);
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
            .scale-hover {
                transition: transform 0.3s ease;
            }
            .scale-hover:hover {
                transform: scale(1.03);
            }
            .map-marker {
                transition: all 0.2s ease;
                cursor: pointer;
                box-shadow: 0 0 0 rgba(255, 255, 255, 0.7);
                animation: pulse 2s infinite;
            }
            .map-marker-smaller {
                width: 1.5rem; /* 24px / 16px = 1.5rem */
                height: 1.5rem; /* 24px / 16px = 1.5rem */
            }
            .map-marker-smaller:hover {
                transform: scale(1.2);
                filter: brightness(1.2);
            }
             /* 脉冲动画 */
            @keyframes pulse {
                0% {
                    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
                }
                70% {
                     box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
                }
                100% {
                    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
                }
            }
            /* 激活状态 */
            .map-marker.active {
                 animation: none;
                 transform: scale(1.3);
                 box-shadow: 0 0 0 3px white, 0 0 0 6px theme('colors.primary');
            }
            .info-panel-content {
                scrollbar-width: thin;
                scrollbar-color: #cccccc #f0f0f0;
            }
            .info-panel-content::-webkit-scrollbar {
                width: 8px;
            }
            .info-panel-content::-webkit-scrollbar-track {
                background: #f0f0f0;
                border-radius: 4px;
            }
            .info-panel-content::-webkit-scrollbar-thumb {
                background-color: #cccccc;
                border-radius: 4px;
            }

            /* 响应式调整 */
            @media (max-width: 1023px) {
                .map-container {
                    height: 500px !important; /* 在中等屏幕以下减小地图高度 */
                }
            }
            @media (max-width: 767px) {
                .map-container {
                    height: 400px !important; /* 在小屏幕进一步减小地图高度 */
                }
                .info-panel {
                    height: auto !important;
                    max-height: 400px; /* 信息面板最大高度 */
                }
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-text-dark">
    <!-- 导航栏 -->
    <header class="bg-white shadow-md fixed w-full z-50 transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center">
                    <span class="text-white font-bold text-xl">湖</span>
                </div>
                <h1 class="text-xl md:text-2xl font-bold text-primary">湖北理工学院</h1>
            </div>
            
            <nav class="hidden md:flex items-center space-x-8">
                <a href="#" class="font-medium text-primary border-b-2 border-primary py-1">校园地图</a>
                <a href="#" class="font-medium text-gray-600 hover:text-primary transition-custom py-1">学校简介</a>
                <a href="#" class="font-medium text-gray-600 hover:text-primary transition-custom py-1">院系设置</a>
                <a href="#" class="font-medium text-gray-600 hover:text-primary transition-custom py-1">招生信息</a>
                <a href="#" class="font-medium text-gray-600 hover:text-primary transition-custom py-1">联系我们</a>
            </nav>
            
            <button class="md:hidden text-gray-600 focus:outline-none" id="menuToggle">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
        
        <!-- 移动端菜单 -->
        <div class="md:hidden bg-white w-full hidden transition-all duration-300" id="mobileMenu">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <a href="#" class="font-medium text-primary py-2 border-l-4 border-primary pl-2">校园地图</a>
                <a href="#" class="font-medium text-gray-600 hover:text-primary transition-custom py-2 border-l-4 border-transparent hover:border-primary pl-2">学校简介</a>
                <a href="#" class="font-medium text-gray-600 hover:text-primary transition-custom py-2 border-l-4 border-transparent hover:border-primary pl-2">院系设置</a>
                <a href="#" class="font-medium text-gray-600 hover:text-primary transition-custom py-2 border-l-4 border-transparent hover:border-primary pl-2">招生信息</a>
                <a href="#" class="font-medium text-gray-600 hover:text-primary transition-custom py-2 border-l-4 border-transparent hover:border-primary pl-2">联系我们</a>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 pt-24 pb-16">
        <!-- 页面标题 -->
        <div class="text-center mb-10">
            <h2 class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold text-gray-800 mb-3">漫步校园地图导览</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">点击地图或下方地点，探索湖北理工学院的每一个角落</p>
        </div>
        
        <!-- 功能区 -->
        <div class="flex flex-col lg:flex-row gap-6 mb-8">
            <!-- 地图区域 -->
            <div class="lg:w-2/3 bg-white rounded-xl shadow-custom p-4 scale-hover">
                <div class="relative w-full map-container" style="height: 600px;">
                    <!-- 校园地图背景 -->
                    <img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/852d1bcd46ff4d3da788f87bc1f0658e.jpg~tplv-a9rns2rl98-24:720:720.image?rk3s=1fb89129&x-expires=1758550687&x-signature=cVy6jDVKE%2BwrpWq%2FWHO%2BxIMOiZg%3D" 
                         alt="湖北理工学院校园地图" 
                         class="w-full h-full object-cover rounded-lg">
                    
                    <!-- 地图标记点 (根据地图调整了位置) -->
                    <div class="map-marker map-marker-smaller absolute top-[22%] left-[32%] bg-primary rounded-full flex items-center justify-center text-white" 
                         data-location="library">
                        <i class="fa fa-book"></i>
                    </div>
                    
                    <div class="map-marker map-marker-smaller absolute top-[20%] left-[84%] bg-secondary rounded-full flex items-center justify-center text-white" 
                         data-location="teaching-building-x">
                        <i class="fa fa-university"></i>
                    </div>
                    
                    <div class="map-marker map-marker-smaller absolute top-[42%] left-[75%] bg-accent rounded-full flex items-center justify-center text-white" 
                         data-location="sports-ground">
                        <i class="fa fa-futbol-o"></i>
                    </div>
                    
                    <div class="map-marker map-marker-smaller absolute top-[80%] left-[35%] bg-purple-600 rounded-full flex items-center justify-center text-white" 
                         data-location="yuzhen-apartment">
                        <i class="fa fa-home"></i>
                    </div>
                    
                    <div class="map-marker map-marker-smaller absolute top-[28%] left-[60%] bg-red-500 rounded-full flex items-center justify-center text-white" 
                         data-location="canteen">
                        <i class="fa fa-cutlery"></i>
                    </div>
                    
                    <!-- 新增地标 -->
                    <div class="map-marker map-marker-smaller absolute top-[11%] left-[67%] bg-blue-400 rounded-full flex items-center justify-center text-white" 
                         data-location="shuangjing-lake">
                        <i class="fa fa-tint"></i>
                    </div>

                    <div class="map-marker map-marker-smaller absolute top-[30%] left-[38%] bg-indigo-600 rounded-full flex items-center justify-center text-white" 
                         data-location="yifu-innovation-building">
                        <i class="fa fa-lightbulb-o"></i>
                    </div>

                    <!-- 新增门和学院地标 -->
                    <div class="map-marker map-marker-smaller absolute top-[3%] left-[92%] bg-pink-500 rounded-full flex items-center justify-center text-white" 
                         data-location="east-gate">
                        <i class="fa fa-sign-in"></i>
                    </div>
                    <div class="map-marker map-marker-smaller absolute top-[45%] left-[5%] bg-pink-500 rounded-full flex items-center justify-center text-white" 
                         data-location="west-gate">
                        <i class="fa fa-sign-in"></i>
                    </div>
                    <div class="map-marker map-marker-smaller absolute top-[5%] left-[50%] bg-pink-500 rounded-full flex items-center justify-center text-white" 
                         data-location="center-gate">
                        <i class="fa fa-sign-in"></i>
                    </div>
                    <div class="map-marker map-marker-smaller absolute top-[45%] left-[97%] bg-teal-500 rounded-full flex items-center justify-center text-white" 
                         data-location="smart-building">
                        <i class="fa fa-graduation-cap"></i>
                    </div>
                    <div class="map-marker map-marker-smaller absolute top-[60%] left-[30%] bg-teal-500 rounded-full flex items-center justify-center text-white" 
                         data-location="medical-school">
                        <i class="fa fa-flask"></i>
                    </div>

                    <!-- 新增教学楼群 K 和 J -->
                    <div class="map-marker map-marker-smaller absolute top-[40%] left-[20%] bg-orange-500 rounded-full flex items-center justify-center text-white" 
                         data-location="teaching-building-k">
                        <i class="fa fa-university"></i>
                    </div>
                    <div class="map-marker map-marker-smaller absolute top-[15%] left-[45%] bg-orange-500 rounded-full flex items-center justify-center text-white" 
                         data-location="teaching-building-j">
                        <i class="fa fa-university"></i>
                    </div>

                    <!-- 新增的两个食堂和一个操场 -->
                    <div class="map-marker map-marker-smaller absolute top-[30%] left-[50%] bg-red-400 rounded-full flex items-center justify-center text-white" 
                         data-location="canteen-student">
                        <i class="fa fa-cutlery"></i>
                    </div>
                    <div class="map-marker map-marker-smaller absolute top-[90%] left-[28%] bg-red-400 rounded-full flex items-center justify-center text-white" 
                         data-location="canteen-zhangyuan">
                        <i class="fa fa-cutlery"></i>
                    </div>
                    <div class="map-marker map-marker-smaller absolute top-[68%] left-[20%] bg-green-500 rounded-full flex items-center justify-center text-white" 
                         data-location="west-stadium">
                        <i class="fa fa-flag-checkered"></i>
                    </div>

                    <!-- 新增 毓竹公寓 -->
                    <div class="map-marker map-marker-smaller absolute top-[35%] left-[45%] bg-purple-800 rounded-full flex items-center justify-center text-white" 
                         data-location="yuzhu-apartment">
                        <i class="fa fa-bed"></i>
                    </div>

                    <!-- 新增校医院 -->
                    <div class="map-marker map-marker-smaller absolute top-[93%] left-[8%] bg-cyan-600 rounded-full flex items-center justify-center text-white" 
                         data-location="school-hospital">
                        <i class="fa fa-medkit"></i>
                    </div>
                </div>
            </div>
            
            <!-- 信息面板 -->
            <div class="lg:w-1/3 bg-white rounded-xl shadow-custom p-6 h-[600px] info-panel flex flex-col">
                <div class="border-b border-gray-200 pb-4 mb-4">
                    <h3 class="text-xl font-bold text-gray-800" id="locationTitle">请点击地图上的地点</h3>
                    <p class="text-gray-500 text-sm" id="locationSubtitle">查看详细信息和游览路线</p>
                </div>
                
                <!-- 地点图片 -->
                <div class="mb-4 rounded-lg overflow-hidden h-48 bg-gray-100 flex items-center justify-center">
                    <img src="" alt="" class="w-full h-full object-cover hidden" id="locationImage">
                    <span id="locationImagePlaceholder" class="text-gray-400">选择地点后显示图片</span>
                </div>
                
                <!-- 地点简介 -->
                <div class="mb-6 flex-grow overflow-y-auto pr-2 info-panel-content" id="locationDescription">
                    <p class="text-gray-600 text-center py-10">选择地图上的一个地点，查看相关信息</p>
                </div>
                
                <!-- 游览路线 -->
                <div class="bg-gray-50 p-4 rounded-lg" id="locationRoute">
                    <h4 class="font-semibold text-gray-700 mb-2 flex items-center">
                        <i class="fa fa-map-signs text-primary mr-2"></i>推荐游览路线
                    </h4>
                    <p class="text-gray-600 text-sm" id="routeDescription">选择地点后显示推荐路线</p>
                </div>
            </div>
        </div>
        
        <!-- 地点列表 -->
        <div class="mb-12">
            <h3 class="text-xl font-bold mb-6 flex items-center">
                <i class="fa fa-map-marker text-primary mr-2"></i>主要地点列表
            </h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 地点卡片 1 -->
                <div class="bg-white rounded-xl shadow-custom overflow-hidden scale-hover location-card cursor-pointer" data-location="library">
                    <div class="h-48 overflow-hidden">
                        <img src="img/tsg.jpg" alt="湖北理工学院图书馆" class="w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <h4 class="font-bold text-lg mb-2">图书馆</h4>
                        <p class="text-gray-600 text-sm mb-3">学校的知识中心，藏书丰富，提供安静的学习环境</p>
                        <button class="text-primary text-sm font-medium flex items-center">
                            查看详情 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 地点卡片 2 -->
                <div class="bg-white rounded-xl shadow-custom overflow-hidden scale-hover location-card cursor-pointer" data-location="teaching-building-x">
                    <div class="h-48 overflow-hidden">
                        <img src="img/x.jpg" alt="湖北理工学院X教学楼群" class="w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <h4 class="font-bold text-lg mb-2">X教学楼群</h4>
                        <p class="text-gray-600 text-sm mb-3">现代化的教学设施，配备先进的多媒体教学设备</p>
                        <button class="text-primary text-sm font-medium flex items-center">
                            查看详情 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 地点卡片 3 -->
                <div class="bg-white rounded-xl shadow-custom overflow-hidden scale-hover location-card cursor-pointer" data-location="sports-ground">
                    <div class="h-48 overflow-hidden">
                        <img src="img/cc.jpg" alt="湖北理工学院东门体育场" class="w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <h4 class="font-bold text-lg mb-2">东门体育场</h4>
                        <p class="text-gray-600 text-sm mb-3">包括足球场、篮球场、网球场等，满足师生运动需求</p>
                        <button class="text-primary text-sm font-medium flex items-center">
                            查看详情 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 地点卡片 4 -->
                <div class="bg-white rounded-xl shadow-custom overflow-hidden scale-hover location-card cursor-pointer" data-location="yuzhen-apartment">
                    <div class="h-48 overflow-hidden">
                        <img src="yz.jpg" alt="湖北理工学院学生宿舍" class="w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <h4 class="font-bold text-lg mb-2">毓真公寓</h4>
                        <p class="text-gray-600 text-sm mb-3">舒适的住宿环境，配备齐全，生活便利</p>
                        <button class="text-primary text-sm font-medium flex items-center">
                            查看详情 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 地点卡片 5 -->
                <div class="bg-white rounded-xl shadow-custom overflow-hidden scale-hover location-card cursor-pointer" data-location="canteen">
                    <div class="h-48 overflow-hidden">
                        <img src="jy.jpg" alt="湖北理工学院静园食堂" class="w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <h4 class="font-bold text-lg mb-2">静园食堂</h4>
                        <p class="text-gray-600 text-sm mb-3">提供多样化的餐饮选择，满足不同口味需求</p>
                        <button class="text-primary text-sm font-medium flex items-center">
                            查看详情 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>

                <!-- 新增地点卡片 7 -->
                <div class="bg-white rounded-xl shadow-custom overflow-hidden scale-hover location-card cursor-pointer" data-location="shuangjing-lake">
                    <div class="h-48 overflow-hidden">
                        <img src="sjh.jpg" alt="湖北理工学院双镜湖" class="w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <h4 class="font-bold text-lg mb-2">双镜湖</h4>
                        <p class="text-gray-600 text-sm mb-3">校园内的明珠，环境优美，是休闲放松的好去处</p>
                        <button class="text-primary text-sm font-medium flex items-center">
                            查看详情 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>

                <!-- 新增地点卡片 8 -->
                <div class="bg-white rounded-xl shadow-custom overflow-hidden scale-hover location-card cursor-pointer" data-location="yifu-innovation-building">
                    <div class="h-48 overflow-hidden">
                        <img src="yf.jpg" alt="湖北理工学院逸夫创业大楼" class="w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <h4 class="font-bold text-lg mb-2">逸夫创业大楼</h4>
                        <p class="text-gray-600 text-sm mb-3">激发学生创新潜能，培养创业实践能力的重要基地</p>
                        <button class="text-primary text-sm font-medium flex items-center">
                            查看详情 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>

                <!-- 新增地点卡片 10-14 -->
                <div class="bg-white rounded-xl shadow-custom overflow-hidden scale-hover location-card cursor-pointer" data-location="east-gate">
                    <div class="h-48 overflow-hidden">
                        <img src="img/dm.jpg" alt="湖北理工学院东门" class="w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <h4 class="font-bold text-lg mb-2">东门</h4>
                        <p class="text-gray-600 text-sm mb-3">学校的主要出入口之一，交通便利</p>
                        <button class="text-primary text-sm font-medium flex items-center">
                            查看详情 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-custom overflow-hidden scale-hover location-card cursor-pointer" data-location="west-gate">
                    <div class="h-48 overflow-hidden">
                        <img src="xm.jpg" alt="湖北理工学院西门" class="w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <h4 class="font-bold text-lg mb-2">西门</h4>
                        <p class="text-gray-600 text-sm mb-3">学校的主要出入口之一，靠近部分学生宿舍区</p>
                        <button class="text-primary text-sm font-medium flex items-center">
                            查看详情 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-custom overflow-hidden scale-hover location-card cursor-pointer" data-location="center-gate">
                    <div class="h-48 overflow-hidden">
                        <img src="img/zm.jpg" alt="湖北理工学院中门" class="w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <h4 class="font-bold text-lg mb-2">中门</h4>
                        <p class="text-gray-600 text-sm mb-3">学校的主要出入口之一，靠近运动场地</p>
                        <button class="text-primary text-sm font-medium flex items-center">
                            查看详情 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-custom overflow-hidden scale-hover location-card cursor-pointer" data-location="smart-building">
                    <div class="h-48 overflow-hidden">
                        <img src="img/zhdl.jpg" alt="湖北理工学院智慧大楼" class="w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <h4 class="font-bold text-lg mb-2">智慧大楼</h4>
                        <p class="text-gray-600 text-sm mb-3">以工科专业为主的学院，拥有多个国家级和省级重点实验室</p>
                        <button class="text-primary text-sm font-medium flex items-center">
                            查看详情 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-custom overflow-hidden scale-hover location-card cursor-pointer" data-location="medical-school">
                    <div class="h-48 overflow-hidden">
                        <img src="yxy.jpg" alt="湖北理工学院医学院" class="w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <h4 class="font-bold text-lg mb-2">医学院</h4>
                        <p class="text-gray-600 text-sm mb-3">基础学科研究和教学的重要基地</p>
                        <button class="text-primary text-sm font-medium flex items-center">
                            查看详情 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>
                <!-- 文学院卡片已删除 -->

                <!-- 新增教学楼群 K 和 J 卡片 -->
                <div class="bg-white rounded-xl shadow-custom overflow-hidden scale-hover location-card cursor-pointer" data-location="teaching-building-k">
                    <div class="h-48 overflow-hidden">
                        <img src="img/k.jpg" alt="湖北理工学院K教学楼群" class="w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <h4 class="font-bold text-lg mb-2">K教学楼群</h4>
                        <p class="text-gray-600 text-sm mb-3">位于校园中心区域，主要承担部分理工科专业的教学任务。</p>
                        <button class="text-primary text-sm font-medium flex items-center">
                            查看详情 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-custom overflow-hidden scale-hover location-card cursor-pointer" data-location="teaching-building-j">
                    <div class="h-48 overflow-hidden">
                        <img src="img/j.jpg" alt="湖北理工学院J教学楼群" class="w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <h4 class="font-bold text-lg mb-2">J教学楼群</h4>
                        <p class="text-gray-600 text-sm mb-3">靠近图书馆，是重要的教学区域之一。</p>
                        <button class="text-primary text-sm font-medium flex items-center">
                            查看详情 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>

                <!-- 新增的两个食堂和一个操场卡片 -->
                <div class="bg-white rounded-xl shadow-custom overflow-hidden scale-hover location-card cursor-pointer" data-location="canteen-student">
                    <div class="h-48 overflow-hidden">
                        <img src="fy.jpg" alt="湖北理工学院枫园食堂" class="w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <h4 class="font-bold text-lg mb-2">枫园食堂</h4>
                        <p class="text-gray-600 text-sm mb-3">品种丰富、环境优雅的大型学生餐厅。</p>
                        <button class="text-primary text-sm font-medium flex items-center">
                            查看详情 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-custom overflow-hidden scale-hover location-card cursor-pointer" data-location="canteen-zhangyuan">
                    <div class="h-48 overflow-hidden">
                        <img src="zy.jpg" alt="湖北理工学院樟园食堂" class="w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <h4 class="font-bold text-lg mb-2">樟园食堂</h4>
                        <p class="text-gray-600 text-sm mb-3">专为有清真饮食需求的师生开设的特色食堂。</p>
                        <button class="text-primary text-sm font-medium flex items-center">
                            查看详情 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-custom overflow-hidden scale-hover location-card cursor-pointer" data-location="west-stadium">
                    <div class="h-48 overflow-hidden">
                        <img src="xc.jpg" alt="湖北理工学院西门体育场" class="w-full h-full object-cover">
                    </div>
                    <div class="p-5">
                        <h4 class="font-bold text-lg mb-2">西门体育场</h4>
                        <p class="text-gray-600 text-sm mb-3">标准的400米跑道和足球场，举办运动会的主要场所。</p>
                        <button class="text-primary text-sm font-medium flex items-center">
                            查看详情 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>

                <!-- 新增 毓竹公寓 卡片 -->
                <div class="bg-white rounded-xl shadow-custom overflow-hidden scale-hover location-card cursor-pointer" data-location="yuzhu-apartment">
                    <div class="h-48 overflow-hidden">
                        <img src="yz.jpg" alt="湖北理工学院毓竹公寓" class="w-full h-full object-cover"> <!-- 图片占位符 -->
                    </div>
                    <div class="p-5">
                        <h4 class="font-bold text-lg mb-2">毓竹公寓</h4>
                        <p class="text-gray-600 text-sm mb-3">环境优美，设施完善的新型学生公寓。</p>
                        <button class="text-primary text-sm font-medium flex items-center">
                            查看详情 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>

                <!-- 新增 校医院 卡片 -->
                <div class="bg-white rounded-xl shadow-custom overflow-hidden scale-hover location-card cursor-pointer" data-location="school-hospital">
                    <div class="h-48 overflow-hidden">
                        <img src="xyy.jpg" alt="湖北理工学院校医院" class="w-full h-full object-cover"> <!-- 图片占位符 -->
                    </div>
                    <div class="p-5">
                        <h4 class="font-bold text-lg mb-2">校医院</h4>
                        <p class="text-gray-600 text-sm mb-3">为师生员工提供基本医疗和公共卫生服务的医疗机构。</p>
                        <button class="text-primary text-sm font-medium flex items-center">
                            查看详情 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 校园概览 -->
        <div class="bg-white rounded-xl shadow-custom p-6 md:p-8">
            <h3 class="text-xl font-bold mb-6 flex items-center">
                <i class="fa fa-info-circle text-primary mr-2"></i>湖北理工学院概览
            </h3>
            
            <div class="flex flex-col md:flex-row gap-8">
                <div class="md:w-1/2">
                    <p class="text-gray-700 mb-4">湖北理工学院是一所以工为主，工理结合，工、理、经、管、医、文、教、艺等多学科协调发展的省属普通本科高校。学校地处素有"江南明珠"之称的湖北省黄石市。</p>
                    <p class="text-gray-700 mb-4">学校占地面积146万平方米，校舍建筑面积66.5万平方米，教学科研仪器设备总值2.5亿元，馆藏图书117万册，电子资源数据库18个。</p>
                    <p class="text-gray-700">学校设有19个教学院部，开设55个本科专业，拥有国家级特色专业、国家级一流本科专业建设点、省级一流本科专业建设点等多个优质专业。</p>
                </div>
                
                <div class="md:w-1/2 grid grid-cols-2 gap-4">
                    <div class="bg-gray-50 p-4 rounded-lg text-center">
                        <div class="text-3xl font-bold text-primary mb-1">55+</div>
                        <div class="text-gray-600 text-sm">本科专业</div>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg text-center">
                        <div class="text-3xl font-bold text-primary mb-1">19</div>
                        <div class="text-gray-600 text-sm">教学院部</div>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg text-center">
                        <div class="text-3xl font-bold text-primary mb-1">146万</div>
                        <div class="text-gray-600 text-sm">占地面积(平方米)</div>
                    </div>
                    <div class="bg-gray-50 p-4 rounded-lg text-center">
                        <div class="text-3xl font-bold text-primary mb-1">117万+</div>
                        <div class="text-gray-600 text-sm">馆藏图书</div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-10">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h4 class="text-lg font-bold mb-4">湖北理工学院</h4>
                    <p class="text-gray-400 text-sm">以工为主，工理结合，多学科协调发展的省属普通本科高校</p>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-4">快速链接</h4>
                    <ul class="space-y-2 text-gray-400 text-sm">
                        <li><a href="#" class="hover:text-white transition-custom">学校首页</a></li>
                        <li><a href="#" class="hover:text-white transition-custom">招生信息</a></li>
                        <li><a href="#" class="hover:text-white transition-custom">人才招聘</a></li>
                        <li><a href="#" class="hover:text-white transition-custom">校园新闻</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-4">联系我们</h4>
                    <ul class="space-y-2 text-gray-400 text-sm">
                        <li class="flex items-center"><i class="fa fa-map-marker mr-2"></i> 湖北省黄石市桂林北路16号</li>
                        <li class="flex items-center"><i class="fa fa-phone mr-2"></i> 0714-6350616</li>
                        <li class="flex items-center"><i class="fa fa-envelope mr-2"></i> info@hbpu.edu.cn</li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-4">关注我们</h4>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-primary transition-custom">
                            <i class="fa fa-weixin"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-primary transition-custom">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-primary transition-custom">
                            <i class="fa fa-youtube-play"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-primary transition-custom">
                            <i class="fa fa-instagram"></i>
                        </a>
                    </div>
                    <div class="mt-4">
                        <img src="https://picsum.photos/id/30/120/120" alt="湖北理工学院微信公众号二维码" class="w-24 h-24 rounded">
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-500 text-sm">
                <p>© 2023 湖北理工学院 版权所有 | 鄂ICP备12345678号</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 地点数据 - 已更新，包含新增地标，删除了文学院和校训石、行政楼，增加了毓竹公寓和校医院，并改进了描述和路线，以及根据要求修改了名称
        const locations = {
            library: {
                title: "图书馆",
                subtitle: "知识的殿堂",
                image: "img/tsg.jpg",
                description: "湖北理工学院图书馆是学校的标志性建筑之一，建筑面积约3.8万平方米，馆藏纸质图书150余万册，电子图书170余万册，中外文数据库40余个。图书馆设有各类阅览室、研讨室、培训教室和休闲区，是师生学习、研究和文化交流的重要场所。其现代化的设施和宽敞明亮的环境，为读者提供了舒适便捷的阅读体验。",
                route: "推荐路线：校门 → 教学楼 → 图书馆 → 食堂 → 运动场地"
            },
            "teaching-building-x": {
                title: "X教学楼群",
                subtitle: "学术交流的场所",
                image: "img/x.jpg",
                description: "学校X教学楼群由多栋现代化建筑组成，总建筑面积庞大。教学楼配备了先进的多媒体教学设备、智慧教室和专业实验室，满足不同学科的教学与科研需求。楼宇内设有休息区、饮水处等便民设施，环境安静整洁，绿化优美，是理想的学习与教学场所。",
                route: "推荐路线：校门 → 教学楼 → 图书馆 → 食堂 → 学生宿舍 → 运动场地"
            },
            "sports-ground": {
                title: "东门体育场",
                subtitle: "健康生活的乐园",
                image: "img/cc.jpg",
                description: "学校拥有完善的体育设施，包括标准田径场、足球场、篮球场、排球场、网球场、体育馆（内含游泳馆、羽毛球馆、乒乓球馆等）。这些设施不仅满足了日常体育教学和学生锻炼的需求，也是学校举办各类体育赛事和活动的重要场所，丰富了师生的校园文化生活。",
                route: "推荐路线：校门 → 教学楼 → 食堂 → 运动场地 → 学生宿舍"
            },
            "yuzhen-apartment": {
                title: "毓真公寓",
                subtitle: "温馨的家园",
                image: "yz.jpg",
                description: "湖北理工学院的学生宿舍区环境优美，设施完善。宿舍多为4人间或6人间，配备空调、网络、独立卫生间和阳台。宿舍区内设有洗衣房、开水房、便利店等生活服务设施，管理规范，为学生提供了安全、舒适、便利的住宿环境。",
                route: "推荐路线：校门 → 图书馆 → 食堂 → 学生宿舍 → 运动场地"
            },
            canteen: {
                title: "静园食堂",
                subtitle: "美食的天地",
                image: "jy.jpg",
                description: "学校静园食堂环境整洁，菜品丰富，价格实惠，能满足来自全国各地师生的不同口味需求。食堂严格执行食品安全标准，确保饮食卫生与营养。除了基本的大伙餐厅，还有风味餐厅、清真餐厅等，为师生提供多样化的餐饮选择。",
                route: "推荐路线：校门 → 教学楼 → 食堂 → 图书馆 → 运动场地 → 学生宿舍"
            },
            // 新增地标数据
            "shuangjing-lake": {
                title: "双镜湖",
                subtitle: "校园内的明珠",
                image: "sjh.jpg", // 使用占位符，实际应替换为双镜湖图片
                description: "双镜湖是湖北理工学院一道亮丽的风景线，位于校园中心区域。湖水清澈，四周绿树成荫，鸟语花香。湖心小岛、九曲桥、凉亭等景观错落有致，构成了一幅美丽的画卷。这里是师生晨读、散步、休闲放松的理想场所，也是学校举办各类文化活动的场地之一，承载着深厚的文化内涵。",
                route: "推荐路线：图书馆 → 双镜湖 → 教学楼 → 食堂"
            },
            "yifu-innovation-building": {
                title: "逸夫创业大楼",
                subtitle: "梦想起航的地方",
                image: "yf.jpg", // 使用占位符，实际应替换为逸夫创业大楼图片
                description: "湖北理工学院逸夫创业大楼是学校深化产教融合、校企合作，培养应用型、复合型、创新型人才的重要平台。园区集教学、科研、实践、孵化于一体，为学生提供创业培训、项目指导、资金支持和成果转化等全方位服务。园内汇聚了众多优秀的创业团队和项目，通过举办各类活动，激发学生的创新潜能，培养创业实践能力。",
                route: "推荐路线：校门 → 教学楼 → 逸夫创业大楼 → 图书馆"
            },
            // 新增门和学院地标数据
            "east-gate": {
                title: "东门",
                subtitle: "主要出入口",
                image: "img/dm.jpg", // 使用占位符
                description: "湖北理工学院东门是学校的主要出入口之一，位于校园东侧，临近城市主干道，交通便利，是连接校园与外部的重要通道。",
                route: "推荐路线：东门 → 教学楼 → 图书馆"
            },
            "west-gate": {
                title: "西门",
                subtitle: "主要出入口",
                image: "xm.jpg", // 使用占位符
                description: "湖北理工学院西门是学校的主要出入口之一，位于校园西侧，靠近部分学生宿舍区和教学区域，是师生日常进出校园的重要通道。",
                route: "推荐路线：西门 → 学生宿舍 → 食堂 → 教学楼"
            },
            "center-gate": {
                title: "中门",
                subtitle: "主要出入口",
                image: "img/zm.jpg", // 使用占位符
                description: "湖北理工学院中门是学校的主要出入口之一，位于校园南侧，靠近运动场地，是师生前往运动场地进行体育锻炼的便捷通道。",
                route: "推荐路线：中门 → 运动场地 → 食堂 → 教学楼"
            },
            "smart-building": {
                title: "智慧大楼",
                subtitle: "工程技术人才培养基地",
                image: "img/zhdl.jpg", // 使用占位符
                description: "智慧大楼是湖北理工学院规模最大的学院之一，以工科专业为主，涵盖机械、电气、计算机、土木、化工等多个领域。学院拥有多个省部级重点实验室和工程研究中心，师资力量雄厚，致力于培养具有创新精神和实践能力的高素质工程技术人才。",
                route: "推荐路线：校门 → 智慧大楼 → 教学楼 → 实验室 → 图书馆"
            },
            "medical-school": {
                title: "医学院",
                subtitle: "基础学科研究基地",
                image: "yxy.jpg", // 使用占位符
                description: "医学院是学校基础学科研究和教学的重要基地，设有数学与统计学院、物理与电子科学学院、化学与化工学院等。学院注重基础理论研究和应用基础研究，为学校的工科、医科等专业提供坚实的数理化基础支撑。",
                route: "推荐路线：校门 → 医学院 → 教学楼 → 实验室 → 图书馆"
            },
            // 文学院、校训石、行政楼数据已删除
            // 新增教学楼群 K 和 J 数据
            "teaching-building-k": {
                title: "K教学楼群",
                subtitle: "理工科教学区",
                image: "img/k.jpg", // 使用占位符
                description: "K教学楼群位于校园中心区域，主要承担部分理工科专业的教学任务。楼宇设计现代，内部配备了先进的教学设施和实验设备，为相关专业的教学和科研活动提供了良好的环境。",
                route: "推荐路线：图书馆 → K教学楼群 → 教学楼 → 食堂"
            },
            "teaching-building-j": {
                title: "J教学楼群",
                subtitle: "教学核心区域",
                image: "img/j.jpg", // 使用占位符
                description: "J教学楼群靠近图书馆，是学校重要的教学区域之一。这里集中了多个学院的教学活动，楼宇设施完善，是师生进行日常教学和学术交流的重要场所。",
                route: "推荐路线：图书馆 → J教学楼群 → K教学楼群 → 食堂"
            },
            // 新增的两个食堂和一个操场数据 (名称已修改)
            "canteen-student": {
                title: "枫园食堂",
                subtitle: "学生主要用餐点",
                image: "fy.jpg", // 使用占位符
                description: "枫园食堂是学校规模较大的学生食堂之一，菜品丰富，环境整洁宽敞，能同时容纳大量师生就餐。这里提供各种风味的窗口，满足不同学生的口味偏好，是学生们日常用餐的主要选择之一。",
                route: "推荐路线：图书馆 → 教学楼 → 枫园食堂 → 宿舍"
            },
            "canteen-zhangyuan": {
                title: "樟园食堂",
                subtitle: "特色餐饮服务",
                image: "zy.jpg", // 使用占位符
                description: "樟园食堂是学校为满足有清真饮食习惯的师生需求而设立的特色食堂。食堂严格按照清真食品标准进行采购、加工和管理，提供多种清真菜品，确保食品安全和符合宗教要求。",
                route: "推荐路线：宿舍区 → 樟园食堂 → 教学楼"
            },
            "west-stadium": {
                title: "西门体育场",
                subtitle: "体育竞技与锻炼",
                image: "xc.jpg", // 使用占位符
                description: "西门体育场是学校举办运动会和进行田径训练的主要场地。拥有标准的400米塑胶跑道、天然草坪足球场和各类田径设施。场地设施完善，是师生进行体育锻炼、竞技比赛和休闲活动的重要场所。",
                route: "推荐路线：中门 → 西门体育场 → 体育馆 → 宿舍"
            },
            // 新增 毓竹公寓 数据
            "yuzhu-apartment": {
                title: "毓竹公寓",
                subtitle: "新型学生公寓",
                image: "yz.jpg", // 使用占位符
                description: "毓竹公寓是学校新建的现代化学生公寓，以其优美的环境和完善的设施而著称。公寓内部布局合理，提供舒适的住宿条件，是学生们生活和休息的理想场所。",
                route: "推荐路线：西门 → 毓竹公寓 → 食堂 → 教学楼"
            },
            // 新增 校医院 数据
            "school-hospital": {
                title: "校医院",
                subtitle: "师生健康保障",
                image: "xyy.jpg", // 使用占位符
                description: "校医院是学校重要的公共服务机构，为全体师生员工提供基本医疗、预防保健、健康教育和公共卫生管理服务。医院环境整洁，设备齐全，医护人员专业，致力于保障校园师生的身心健康。",
                route: "推荐路线：教学楼 → 校医院 → 食堂"
            }
        };
        
        // DOM元素缓存
        const locationTitle = document.getElementById('locationTitle');
        const locationSubtitle = document.getElementById('locationSubtitle');
        const locationImage = document.getElementById('locationImage');
        const locationImagePlaceholder = document.getElementById('locationImagePlaceholder');
        const locationDescription = document.getElementById('locationDescription');
        const routeDescription = document.getElementById('routeDescription');
        const mapMarkers = document.querySelectorAll('.map-marker');
        const locationCards = document.querySelectorAll('.location-card');

        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('py-2', 'shadow-lg');
                navbar.classList.remove('py-3', 'shadow-md');
            } else {
                navbar.classList.add('py-3', 'shadow-md');
                navbar.classList.remove('py-2', 'shadow-lg');
            }
        });
        
        // 移动端菜单切换
        document.getElementById('menuToggle').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobileMenu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 显示地点信息的核心函数
        function showLocationInfo(locationId) {
            const location = locations[locationId];
            if (!location) return;

            // 更新信息面板内容
            locationTitle.textContent = location.title;
            locationSubtitle.textContent = location.subtitle;
            
            if (location.image) {
                locationImage.src = location.image;
                locationImage.alt = location.title;
                locationImage.classList.remove('hidden');
                locationImagePlaceholder.classList.add('hidden');
            } else {
                locationImage.classList.add('hidden');
                locationImagePlaceholder.classList.remove('hidden');
            }
            
            locationDescription.innerHTML = `<p class="text-gray-600 mb-4">${location.description}</p>`;
            routeDescription.textContent = location.route;
            
            // 更新地图标记的激活状态
            mapMarkers.forEach(marker => {
                if (marker.dataset.location === locationId) {
                    marker.classList.add('active');
                } else {
                    marker.classList.remove('active');
                }
            });

            // 在移动设备上，点击地点后可以平滑滚动到信息面板
            if (window.innerWidth < 1024) {
                document.querySelector('.info-panel').scrollIntoView({ behavior: 'smooth' });
            }
        }
        
        // 绑定地图标记点击事件
        mapMarkers.forEach(marker => {
            marker.addEventListener('click', function(e) {
                e.stopPropagation(); // 防止事件冒泡
                showLocationInfo(this.dataset.location);
            });
        });
        
        // 绑定地点卡片点击事件
        locationCards.forEach(card => {
            card.addEventListener('click', function() {
                const locationId = this.dataset.location;
                showLocationInfo(locationId);
                
                // 滚动到地图区域
                if (window.innerWidth >= 1024) {
                    document.querySelector('.map-container').scrollIntoView({ behavior: 'smooth' });
                }
            });
        });

        // 页面加载完成后，默认显示图书馆信息
        window.addEventListener('load', function() {
            showLocationInfo('library');
        });

        // 点击地图背景或其他区域时，取消激活状态
        document.querySelector('.map-container').addEventListener('click', function(e) {
           if (e.target === this) { // 确保点击的是地图背景，而不是标记
                mapMarkers.forEach(marker => marker.classList.remove('active'));
           }
        });
        
    </script>
</body>


